<template>
	<view class="index-box" :style="{'--price':vuex_config.price}" v-if="dataForm.pk_id?true:false">
		<view class="data-list">
			<view class="data-item">
				<view class="di-t bb-plus u-flex l1 fw-bold">订单编号：{{dataForm.order_no}}</view>
				<view class="di-c">
					<image style="width: 180rpx;" :src="dataForm.logo || vuex_config.errImg" mode="widthFix"></image>
					<view class="box">
						<view class="">{{dataForm.name}}</view>
						<view class="price">￥{{$price(dataForm.price)}}</view>
						<view class="u-flex u-row-right">
							<u-number-box v-model="validateNum" :min='0' :max='dataForm.num - dataForm.validate_num'>
							</u-number-box>
						</view>
					</view>
				</view>
				<view
					:class="['di-b','u-font-26','c-ff','l1','u-flex','u-row-center',dataForm.num - dataForm.validate_num <= 0 ? 'di-b-suc' : '']"
					@click="submit">
					{{dataForm.num == dataForm.validate_num?'已核销':'立即核销'}}
				</view>
			</view>
		</view>
		<view class="form-box">
			<view class="form-cell bb-plus">
				<view class="f-24 l1">自提信息</view>
			</view>
			<view class="form-cell bb-plus">
				<view class="form-name">联系人</view>
				<view class="form-input">{{dataForm.user_name}}</view>
			</view>
			<view class="form-cell bb-plus">
				<view class="form-name">手机号码</view>
				<view class="form-input">{{dataForm.mobile}}</view>
			</view>
			<view class="form-cell bb-plus">
				<view class="form-name">下单时间</view>
				<view class="form-input">{{dataForm.date_creation | format}}</view>
			</view>
			<view class="form-cell bb-plus">
				<view class="form-name">备注</view>
				<view class="form-input">{{dataForm.remark || '无'}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		formatDate
	} from '@/utils/moment'
	export default {
		data() {
			return {
				dataForm: {},
				validateNum: 0,
				back: ''
			}
		},
		filters: {
			format(time) {
				return formatDate(time, 'YYYY-MM-DD HH:mm:ss')
			}
		},
		onLoad(option) {
			if (option && option.order_id) {
				this.$loading()
				let order_id = Number(option.order_id)
				this.$adminPost('GetProductOrderByAddressList', {
					business_id: this.vuex_business.pk_id,
					name: option.order_no
				}).then(res => {
					this.dataForm
					let obj = res.data.find((item) => {
						if (item.order_id == order_id) {
							return true
						} else {
							return false
						}
					})
					if (obj) {
						if (obj.num - obj.validate_num > 0) {
							this.validateNum = obj.num - obj.validate_num
						}
						this.dataForm = {
							...obj
						}
					} else {
						uni.showModal({
							title: '没有查到相关订单信息',
							showCancel: false,
							success: () => {
								this.uniBack()
							}
						})
					}
					this.$hide()
				})
			}
		},
		methods: {
			submit() {
				if (this.dataForm.num - this.dataForm.validate_num <= 0) {
					this.$toast('已完成核销')
					return
				} else if (this.validateNum <= 0) {
					return this.$toast('核销数量不能为空')
				}
				this.$loading()
				this.$adminPost('SetWriteOFFOrder', {
					order_id: this.dataForm.pk_id,
					detailed_id: this.dataForm.order_id,
					detailed_num: this.validateNum,
					delivery_id: this.vuex_user.pk_id,
					price: this.dataForm.price * this.validateNum
				}).then(res => {
					this.$hide()
					this.$toast('核销成功')
					setTimeout(() => {
						this.uniBack(1)
					}, 1000)
				})
			}
		}
	}
</script>
<style>
	page {
		background-color: #F5F5F5;
	}
</style>
<style lang="scss" scoped>
	.di-c>view {
		min-height: 60rpx;
	}

	.di-spec {
		width: 100%;
	}

	.c-ff {
		color: #ffffff;
	}

	.l1 {
		line-height: 1;
	}

	.c-99 {
		color: #999999;
	}

	.fw-bold {
		font-weight: bold;
	}

	.di-spec {
		flex: 1;
		width: 100%;
		margin-right: 20rpx;
	}

	.form-box {
		width: 690rpx;
		margin: 0 30rpx;
		border-radius: 10rpx;
		background-color: #fff;
	}

	.form-cell {
		width: 100%;
		min-height: 98rpx;
		display: flex;
		align-items: center;
		padding: 24rpx;
	}

	.ft-icon {
		width: 40rpx;
		height: 40rpx;
		margin-right: 20rpx;
	}

	.form-name {
		width: 170rpx;
		font-weight: bold;
	}

	.form-input {
		flex: 1;
		width: 100%;
		color: #999999;
	}

	.data-list {
		width: 100%;
		padding: 30rpx 30rpx 0;

	}

	.box {
		flex: 1;
		display: flex;
		flex-direction: column;

		.price {
			color: var(--price);
			padding: 30rpx 0;
		}
	}

	.data-item {
		width: 100%;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px 0px 16rpx 0px rgba(0, 0, 0, 0.09);
		border-radius: 10rpx 10rpx 0px 0px;
		overflow: hidden;
		margin-bottom: 20rpx;
	}

	.di-t {
		width: 100%;
		height: 67rpx;
		padding: 0 20rpx;
	}

	.bb-plus:after {
		left: 20rpx;
		right: 20rpx;
	}

	.di-c {
		width: 100%;
		padding: 30rpx 20rpx;
		display: flex;
	}

	.di-c view {
		padding: 5rpx 0;
	}

	.di-b {
		width: 100%;
		height: 80rpx;
		background: #E70013;
		border-radius: 0px 0px 10rpx 10rpx;
	}

	.di-b-suc {
		background: #ccc;
	}
</style>
